<template>
	<view>
		<view class="page-foot" v-if="detail.is_agent==2">
			<!-- #ifdef MP -->
			<button open-type="share" class="g-btn3">邀请签约</button>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<button class="btn2">邀请签约</button>
			<!-- #endif -->
			<!-- #ifdef H5 -->
			<button class="btn2" >邀请签约</button>
			<!-- #endif -->
		</view>
		<view class="page-foot" v-else>
			<view class="g-btn3" v-if="detail.is_agent==0" @click="saveImg(2)">签约并去支付</view>
			<view class="g-btn3" v-else  @click="saveImg(1)">签约</view>
		</view>
		<view class="container p30">
			<view class="fs34 col10 tc pb30">房屋租赁合同</view>
			<view class="fs34 col89 pb20">甲方(房东) </view>
			<view class="fs34 col89 pb20 flex-box">
					<view style="width: 5em;">姓名：</view><view class="col10 flex-grow-1">{{detail.rental_order.lessor_name?detail.rental_order.lessor_name:'暂未填写'}}</view>
			</view>
			<view class="fs34 col89 pb20 flex-box"><view style="width: 5em;">身份证号：</view><view class="col10 flex-grow-1">{{detail.rental_order.lessor_identify?detail.rental_order.lessor_identify:'暂未填写'}}</view></view>
			<view class="fs34 col89 pb30 flex-box"><view style="width: 5em;">电话号码：</view><view class="col10 flex-grow-1">{{detail.rental_order.lessor_mobile?detail.rental_order.lessor_mobile:'暂未填写'}}</view></view>
			
			<view class="fs34 col89 pb20">乙方(租户) </view>
			<view class="fs34 col89 pb20 flex-box">
					<view style="width: 5em;">姓名：</view><view class="col10 flex-grow-1">{{detail.rental_order.renter_name?detail.rental_order.renter_name:'暂未填写'}}</view>
			</view>
			<view class="fs34 col89 pb20 flex-box"><view style="width: 5em;">身份证号：</view><view class="col10 flex-grow-1">{{detail.rental_order.renter_identify?detail.rental_order.renter_identify:'暂未填写'}}</view>
			</view>
			<view class="fs34 col89 pb20 flex-box"><view style="width: 5em;">电话号码：</view><view class="col10 flex-grow-1">{{detail.rental_order.renter_mobile?detail.rental_order.renter_mobile:'暂未填写'}}</view>
			</view>
			
			<view class="fs30 col3">
				<rich-text :nodes="detail.contact.content"></rich-text>
			</view>
			<!-- <template>
				<view class="fs30 col89 pt40 pb40">
					<view class="pb30">乙方(租户)</view>
					<view class="pb30">姓名：<text class="col10">米永芸</text></view>
					<view class="pb30">身份证号：<text class="col10">310210198002120926</text></view>
					<view>电话号码：<text class="col10">15634224788</text></view>
				</view>
			</template> -->
			<template v-if="detail.is_agent != 2">
			<view class="fs30 col89 pt40 pb40" v-if="detail.is_agent == 1">
				<view class="pb30">甲方(房东)</view>
				<view class="flex-box input_box">
					<view>姓名： </view>
					<input type="text" v-model="detail.rental_order.lessor_name" placeholder="请输入">
				</view>
				<view class="flex-box input_box">
					<view>电话号码： </view>
					<input type="text" v-model="detail.rental_order.lessor_mobile" placeholder="请输入">
				</view>
				<view class="flex-box input_box">
					<view>身份证号： </view>
					<input type="text" v-model="detail.rental_order.lessor_identify" placeholder="请输入">
				</view>
			</view>
			<!-- 判断当前用户身份是不是租户 -->
			<view class="fs30 col89 pt40 pb40" v-else>
				<view class="pb20">乙方(租户)</view>
				<view class="flex-box input_box">
					<view>姓名： </view>
					<input type="text" v-model="detail.rental_order.renter_name" placeholder="请输入">
				</view>
				<view class="flex-box input_box">
					<view>身份证号： </view>
					<input type="idcard" v-model="detail.rental_order.renter_identify" placeholder="请输入">
				</view>
				<view class="flex-box input_box">
					<view>电话号码： </view>
					<input type="number" v-model="detail.rental_order.renter_mobile" placeholder="请输入">
				</view>
			</view>
			
			
			
			<view class="mt40 pt20 flex-box flex-align-start pb50" v-if="detail.is_agent == 1">
				<view class="fs34 col3">甲方：</view>
				<view class="flex-grow-1">
					<view class="sign_box mb20" @click="toggleJiaPop">
						<image :src="lessor_sign" mode="aspectFill"></image>
					</view>
					<view class="fs28 col89">提示：请点击灰色部分并使用工整的字体进行签字</view>
				</view>
			</view>
			
			<view class="flex-box flex-align-start pb50" v-else>
				<view class="fs34 col3">乙方：</view>
				<view class="flex-grow-1">
					<view class="sign_box mb20" @click="toggleYiPop">
						<image :src="renter_sign" mode="aspectFill"></image>
					</view>
					<view class="fs28 col89">提示：请点击灰色部分并使用工整的字体进行签字</view>
				</view>
			</view>
			</template>
			<block v-if="isShowJia">
				<wyj-sign sureName="sureJia" cancelName="cancelJia" font_color="#000" :rotate="90" />
			</block>
			
			<block v-if="isShowYi">
				<wyj-sign sureName="sureYi" cancelName="cancelYi" font_color="#000" :rotate="90" />
			</block>


		</view>
		
		
		<u-popup :show="agreePopShow" mode="center" round="20" >
			<view class="add-pop">
					<view class="fs32 tc col3 mb40">签约成功</view>
					<view class="flex-box flex-center">
						<view class="foot-btn1" @click="goIndex">首页</view>
						<!-- #ifdef MP -->
						<button open-type="share" class="foot-btn2">去分享</button>
						<!-- #endif -->
						<!-- #ifdef APP-PLUS -->
						<button class="foot-btn2">去分享</button>
						<!-- #endif -->
						<!-- #ifdef H5 -->
						<button class="foot-btn2" >去分享</button>
						<!-- #endif -->
					</view>
			</view>
		</u-popup>
		
	</view>
</template>

<script>
	const functions = require('../../../utils/functions.js');
	const core = require('@/xilu/core.js');
	export default {
		data() {
			return {
				isShowJia: false,
				isShowYi: false,
				rental_order_id: 0, //签约订单id
				is_type: 0, //1房东,从房源管理进入，2:代理房源进入
				detail: {},
				user_info: {},
				lessor_sign: '', //房东签名
				renter_sign: '', //租客签名
				lessor_sign_img: '', //房东签名
				renter_sign_img: '', //租客签名
				posterPath: '',
				posterContact: '',
				agreePopShow:false
			};
		},
		onLoad(options) {
			// 甲签名 注册事件 接收数据 {base64}
			uni.$on('sureJia', (tempFile) => {
				console.log(tempFile, '甲')
				this.lessor_sign = tempFile;
				this.isShowJia = false;
			});
			uni.$on('cancelJia', () => {
				this.isShowJia = false;
			});
			// 乙签名 注册事件 接收数据
			uni.$on('sureYi', (tempFile) => {
				console.log(tempFile, '乙')
				this.renter_sign = tempFile;
				this.isShowYi = false;
			});
			uni.$on('cancelYi', () => {
				this.isShowYi = false;
			});
			let that = this;
			this.rental_order_id = options.rental_order_id || 0;
			functions.checkLogin(function (ret) {
				if (ret) {
					that.getContract();
				}else{
					uni.navigateTo({
						url:'/pages/home/login/login'
					})
				}
			});
			uni.$on("getContract",function(data){
				that.getContract();
			})
		},
		onShareAppMessage: function(e) {
			if(e.from == 'button'){
				let id = this.rental_order_id;
				return {
					title: '租房合同签约',
					path: '/pages/rental/sign_now/sign_now?rental_order_id='+id
				};
			}
		},
		methods:{
			goIndex(){
				uni.switchTab({
					url:'/pages/home/index/index'
				})
			},
			toggleJiaPop() {
				this.isShowJia = !this.isShowJia
			},
			toggleYiPop() {
				this.isShowYi = !this.isShowYi
			},
			//获取合同
			getContract() {
				let that = this;
				core.get({
					url: 'api/xiluhouse.rental_order/contract',
					data: {
						rental_order_id: that.rental_order_id
					},
					success: ret => {
						//富文本使用
						if (ret.data.contact.content) {
							ret.data.contact.content = core.formatRichText(ret.data.contact.content);
						}
						that.detail = ret.data
						that.renter_sign_img = ret.data.rental_order.renter_sign ? ret.data.rental_order
							.renter_sign : ''
						that.lessor_sign_img = ret.data.rental_order.lessor_sign ? ret.data.rental_order
							.lessor_sign : ''
					},
					fail:ret=>{
						console.log(ret)
						uni.showModal({
							title:'提示',
							content: ret.msg,
							success() {
								uni.navigateBack({});
								return ;
								uni.reLaunch({
									url: '/pages/home/index/index'
								})
							}
						})
						return false;
					}
				})
			},
		
			saveImg(index) {
				let that = this;
				let detail = that.detail;
				let data = {
					rental_order_id: detail.rental_order.id,
					renter_name: detail.rental_order.renter_name,
					renter_mobile: detail.rental_order.renter_mobile,
					renter_identify: detail.rental_order.renter_identify,
					lessor_name: detail.rental_order.lessor_name,
					lessor_mobile: detail.rental_order.lessor_mobile,
					lessor_identify: detail.rental_order.lessor_identify,
					is_broker: detail.is_agent == 0 ? 0 : detail.profile.is_broker
				}
				let img = detail.profile.is_broker == 0 ? that.renter_sign : that.lessor_sign;
				if (img == '') {
					uni.showToast({
						title: "请签字",
						icon:'none'
					});
					return;
				}
				uni.showLoading({title:'合同生成中...',mask:true});
				core.uploadFile({
					filePath: img,
					success: (ret, response) => {
						let path = ret.data.url
						if (detail.profile.is_broker == 0) {
							data.renter_sign = path
						} else {
							data.lessor_sign = path
						}
						core.post({
							url: 'api/xiluhouse.rental_order/user_sign',
							data: data,
							success: ret => {
								uni.hideLoading()
								if (index == 1) {
									uni.showToast({
										title: '签约成功',
										icon: 'none'
									});
									that.agreePopShow = true;
								} else {
									if(ret.data.checkinfo==4){
										uni.showToast({
											title: '签约成功',
											icon: 'none'
										});
										that.agreePopShow = true;
									}else{
										uni.navigateTo({
											url: "/pages/rental/sign_name/sign_name?rental_order_id=" + that.rental_order_id
										})
									}
								}
							},
							fail:ret =>  {
								uni.hideLoading()
							}
						})
					}
				});
			},
		}
	}
</script>

<style lang="less" scoped>
	.input_box {
		width: 690rpx;
		height: 90rpx;
		background: #F7F9FC;
		border-radius: 15rpx;
		padding: 0 30rpx;
		margin-bottom: 30rpx;

		input {
			height: 90rpx;
			line-height: 50rpx;
		}
	}

	.g-btn3 {
		margin: 9rpx auto;
	}
	.sign_box {
		width: 600rpx;
		height: 704rpx;
		background: #F7F9FC;
		border-radius: 15rpx;
		
		image {
			display: block;
			width: 600rpx;
			height: 704rpx;
		}
	}
	
	.add-pop {
		padding: 40rpx 40rpx 50rpx;
		width: 650rpx;
		background: #FFFFFF;
		border-radius: 20rpx;
		.agreement{
			max-height: 40vh;
			overflow-y: scroll;
		}
		.foot-btn1 {
			margin: 0 20rpx;
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			border: 1px solid #CCCCCC;
			font-size: 30rpx;
			color: #aaa;
			line-height: 80rpx;
			text-align: center;
		}
		
		.foot-btn2 {
			margin: 0 20rpx;
			width: 230rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: var(--normal);
			font-size: 30rpx;
			color: #FFFFFF;
			line-height: 80rpx;
			text-align: center;
		}
	}
</style>
